<template>
  <div>
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input placeholder="请输入关键字" v-model="incomeReq.keyword" style="width: 140px; margin-left: 10px"
        clearable></el-input>
      <span style="text-align: right; margin-left: 20px">提成月份</span>
      <el-date-picker v-model="months" type="monthrange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
        style="margin-left: 10px; width: 240px"></el-date-picker>
      <span style="text-align: right; margin-left: 10px">主办人员</span>
      <el-select filterable v-model="incomeReq.hosterId" clearable style="margin-left: 10px;width: 200px">
        <el-option v-for="(item, index) in hosters" :key="index" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 20px" size="small" @click="
        incomeReq.pageIndex = 1
      getDatas()
        ">
        搜索
      </el-button>
      <el-button type="warning" style="margin-left: 10px" size="small" @click="outputIncomeExcel">
        导出报表
      </el-button>
    </div>
    <div class="main">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="概览" name="stat">
          <div ref="chart1" style="margin-top:50px;width: 100%; height: 60vh"></div>
        </el-tab-pane>
        <el-tab-pane label="图表" name="table">
          <el-table style="overflow: auto" height="640px" :data="incomeRes.Items" stripe border highlight-current-row>
            <el-table-column type="index" width="40"></el-table-column>
            <el-table-column label="案件号" prop="CS_No" width="160"></el-table-column>
            <el-table-column label="案件名" prop="CS_DisplayName"></el-table-column>
            <el-table-column label="时间" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.CEI_Time | formatMonth }}</div>
              </template>
            </el-table-column>
            <el-table-column label="提成金额" prop="ChargeSum" width="120">
              <template slot-scope="scope">
                <div> {{ scope.row.CEI_Fee }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="公式" prop="BillSum">
              <template slot-scope="scope">
                <div> {{ scope.row.CEI_Expression }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="toCase(scope.row.CI_CaseID)" type="text" size="small" icon="el-icon-search"
                  title="查看案件详情">
                  案件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
            :current-page.sync="incomeReq.pageIndex" :total="incomeRes.Total" :page-size="incomeReq.pageSize"
            :page-sizes="[10, 15, 20]" @size-change="
              (val) => {
                incomeReq.pageSize = val
                getIncomes()
              }
            " @current-change="getIncomes()"></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  baseURL,
  tokenName,
  empIdName
} from '@/config'
import { getIncomes, getIncomeStat, getHosterTeam } from '@/api/personal/salemanStas'
import axios from 'axios'

export default {
  data: function () {
    return {
      activeName: 'stat',
      pageData: null,
      months: [],
      hosters: [],
      incomeReq: {
        keyword: '',
        month1: null,
        month2: null,
        pageIndex: 1,
        pageSize: 10,
      },
      incomeRes: {
        Items: [],
        Total: 0,
      },
    }
  },
  watch: {
    months: function (value) {
      this.incomeReq.month1 = value[0] ? value[0] : null
      this.incomeReq.month2 = value[1] ? value[1] : null
    },
  },
  methods: {
    getHosterTeam() {
      getHosterTeam().then(({ data }) => {
        this.hosters = data
      })
    },
    outputIncomeExcel() {
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post(
          '/api/Personal/SalemanStas/OutputIncomeExcel',
          this.incomeReq,
          config
        )
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '回款报表.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
    toCaseInfoPage(caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
    getDatas() {
      this.getIncomes()
      this.getIncomeStat()
    },
    getIncomes() {
      getIncomes(this.incomeReq).then(({ data }) => {
        this.incomeRes = data
      })
    },
    getIncomeStat() {
      getIncomeStat(this.incomeReq).then(({ data }) => {
        this.pageData = data
        this.showChart1()
      })
    },
    showChart1() {
      var xAxisDatas = this.pageData.chart1.datas.map((x) => x.name)
      var seriesData1 = this.pageData.chart1.datas.map((x) => ({ value: x.value }))
      var seriesData2 = this.pageData.chart1.datas.map((x) => ({ value: x.tag.length }))

      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        const option = {
          title: {
            text: this.pageData.chart1.title,
            textStyle: { fontSize: 20 },
            left: '35%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
          },
          legend: { align: 'left', right: '10%' },
          xAxis: {
            data: xAxisDatas,
          },
          yAxis: [
            {
              type: 'value',
              name: '提成金额',
              axisLabel: {
                formatter: '{value} 元',
              },
            },
            {
              type: 'value',
              name: '提成笔数',
              position: 'right',
              axisLabel: {
                formatter: '{value} 个',
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '提成金额',
              type: 'bar',
              yAxisIndex: 0,
              data: seriesData1,
            },
            {
              name: '提成笔数',
              type: 'line',
              yAxisIndex: 1,
              data: seriesData2,
            },
          ],
        }
        myChart.setOption(option)
      }
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getHosterTeam()
    this.getDatas()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: 95%;
  overflow: auto;
}
</style>